<template>
  <el-dialog title="升学选择" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="60%">
    <!--checkType 1 查看详情 2 编辑-->
    <div class="dialog_conwrap">
      <p class="upgloadTitle"><i class="el-icon-warning-outline"></i>请选择年段班级进行升班</p>
      <div class="classlist mb-10" v-for="(item,index) in classesListNew[segmentArray.section_name]" :key="index">
        <span>{{segmentArray.section_name}} - {{item.class_name}}</span>
        <span class="iconfont iconyoujiantou classicon"></span>
        <span>{{upgloadSegmentArray.section_name}} - </span>
        <el-select v-model="fromData[index].new" placeholder="请选择班级" @change="sectionChange" class="mr-10">
          <el-option :label="items.class_name" :value="items.id" v-for="(items, indexs) in classesListNew[upgloadSegmentArray.section_name]"
                     :key="indexs"></el-option>
        </el-select>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="saveFrom">确定并提交升学</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import api from '@/utils/api.js'

  export default {
    name: 'uploadClass',
    props: ['visible', 'segmentId', 'upgradeId'],
    data () {
      return {
        dialogVisible: false,
        value: '',
        sectionList: [],
        classesListNew: [],
        segmentArray: {}, // 需要升学的年段
        upgloadSegmentArray: {}, // 需要升学到的年段
        fromData: []
      }
    },
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          this.fromData = []
          this.classList()
        }
      }
    },
    methods: {
      saveFrom () {
        console.log('提交的升学年段班级：', this.fromData)
        this.$post(api.new_semester_upgrade, {id: this.segmentId, list: JSON.stringify(this.fromData)}).then((response) => {
          if (response.code === 0) {
            this.dialogVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$emit('refreshFn')
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      sectionChange (option) {

      },
      classList () {
        // 年段
        this.$fetch(api.user_sectionindex, {p: 1}).then((response) => {
          if (response.code === 0) {
            this.sectionList = response.list.data
            for (let i in response.list.data) {
              if (response.list.data[i].id === this.segmentId) {
                this.segmentArray = response.list.data[i]
              }
              if (response.list.data[i].id === this.upgradeId) {
                this.upgloadSegmentArray = response.list.data[i]
              }
            }
            console.log('需要升学的班级：', this.segmentArray)
            this.classSecondList()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      classSecondList () {
        // 班级
        this.$fetch(api.user_classesindex, {p: 1}).then((response) => {
          if (response.code === 0) {
            let array_ = {}
            for (let i in response.list.data) {
              let new_array = array_[response.list.data[i].section_id] || []
              new_array.push(response.list.data[i])
              array_[response.list.data[i].section_id] = new_array
            }
            this.classesListNew = array_
            for (let i in array_[this.segmentArray.section_name]) {
              let obj_ = {new: ''}
              obj_.old = array_[this.segmentArray.section_name][i].id
              // [{"old":1,"new":2},{"old":3,"new":4}]  fromData:[]
              this.fromData.push(obj_)
            }
            console.log('班级信息:', array_)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>
